<template>
  <div class="focus" v-cloak>
    <ul class="focusUl">
      <li v-for="(scroll,scrollIndex) in scrolls"  v-show="scrollIndex==num" :key="scroll.name">
        <img :src="getImgUrl(scroll.imgsrc)">
      </li>
    </ul>
  </div>
</template>

<script>
  import api from "../../../axios/api"

  export default {
    name: "scrolls",
    data() {
      return {
        scrolls: [],
        num : 3
      }
    },
    methods: {
      getImgUrl: function (imgsrc) {
        return "../../../static/images/scrolls/" + imgsrc;
      },
      setDataFromAxios: function () {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/scrolls", null, "post")
          .then(res => {
            this.scrolls = res.scrolls;
            this.showPic();
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      showPic:function(){
        setInterval(()=>{
          this.num++;
          if(this.num==4){
            this.num=0
          }

        },1000)
      }
    },
    created() {
      this.setDataFromAxios();
    }
  }
</script>

<style scoped lang="stylus">
  [v-cloak] {
    display: none!important;
  }
  .focus
    margin 0 auto
    width 1000px
    height 280px
    position relative

    .focusUl
      margin 0
      padding 0
      width 5000px


      li
        list-style none
        float left
        width 1000px
        position absolute
        left 0
        right 0

        img
          width 1000px
          height 280px

  .focus:after
    display block
    content ""
    clear both
</style>
